<template>
  <div class="pages">
    <van-sticky>
      <div class="header">
        <div class="fls" @click="$router.back(-1)">
          <img src="../../../static/images/icon-back.png" alt="">
        </div>
        <div class="centern">{{ name }}</div>
        <div class="frs_right" v-if="userinfoing.ownerType === 'AGENCY'" @click="inater()">
          <img src="../../../static/images/icon-tdfl.png" alt="">
          <div class="titlecenter">团队费率</div>
        </div>
      </div>
    </van-sticky>

    <div class="setboxlist" v-for="(item,index) in setbolist" :key="index" @click="user_Details(item.id)">
      <div class="left_fl">
        <div class="pics">
          名
          <div class="biaoqian" v-if="item.role == 'LEADER' ">团队长</div>
        </div>
        <div class="zuobiannei">
          <div class="tiop">
            <div class="fls">{{ item.name }}</div>
            <div class="frs" v-if="item.phoneNo == '' || item.phoneNo == null ">-</div>
            <div class="frs" v-if="item.phoneNo != '' || item.phoneNo != null">{{ item.phoneNo }}</div>
          </div>
          <div class="binbot">
            <div class="senbvs" v-for="(items,index1) in item.businesses" :key="index1">
              <!-- 支付宝 -->
              <img v-if="items.businessType == 'AliPay'" src="../../../static/images/icon-zfb.png" alt="">
              <!-- 微信 -->
              <img v-if="items.businessType == 'WeChatPay'" src="../../../static/images/icon-wzzf.png" alt="">
              <!-- 云闪付 -->
              <img v-if="items.businessType == 'unionPay'" src="../../../static/images/icon-ysf.png" alt="">
              <div>{{ items.value }}%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right_fr">
        <img src="../../../static/images/icon-arrow-black.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import api from '../../api/managemenTteam'
import publicApi from '../../api/api'
import { Toast } from 'vant'

Vue.prototype.$api = api
Vue.prototype.$publicApi = publicApi
export default {
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
  },
  data() {
    return {
      id: this.$route.query.id,
      name: this.$route.query.name,
      setbolist: [],
      userinfoing: {
        agency: {}
      }//用户信息
    }
  },
  mounted() {
    // console.log(JSON.parse(this.$route.query.item))
    this.members()  // 根据团队id 查询团队成员列表
    this.userinfo()
  },
  methods: {
    // 团队费率
    inater() {
      this.$router.push({ path: '/groupRate?item=' + this.$route.query.item })
    },
    // 获取用户信息接口
    userinfo() {
      this.$publicApi.userinfo().then((res) => {
        // console.log(res)
        if (res.status === '0000') {
          this.userinfoing = res.payload
        } else {
          Toast(res.describe)
        }
      })
    },
    // 根据团队id 查询团队成员列表
    members() {
      const data = {
        sort: 'id,desc',
        agencyTeamId: this.id,
        // name:this.name,
        page: '0',
        size: 9999
      }
      this.$api.members(data).then((res) => {
        if (res.status === '0000') {
          console.log(res.payload.content)
          this.setbolist = res.payload.content
        }
      })
    },
    // 用户详情
    user_Details(id) {
      this.$router.push({ path: '/user_Details?id=' + id + '&&item=' + this.$route.query.item })
      // this.$router.push({ name: "user_Details?id="+id,params:{id:id}});
    }
  }
}
</script>

<style scoped>
.pages {
  width: 100%;
}

.header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  background: #3288FF;
}

.header > .fls {
  width: 28%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header > .fls > img {
  width: 24px;
  height: 24px;
}

.centern {
  width: 44%;
  text-align: center;
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 17px;
  letter-spacing: 0px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/

}

.frs_right {
  width: 28%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.frs_right > img {
  width: 24px;
  height: 24px;
}

.titlecenter {
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
  margin-left: 8px;
}

.setboxlist {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;
  /* border-bottom: 1px solid #f2f2f2; */
  margin-bottom: 2px;
}

.left_fl {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pics {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #3288FF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 16px;
  letter-spacing: 0px;
}

.pics > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.biaoqian {
  width: 54px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: #F2C94C;
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 12px;
  letter-spacing: 0px;
  position: absolute;
  bottom: 0;
}

.zuobiannei {
  width: 80%;
}

.tiop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tiop > .fls {
  color: #333333;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 16px;
  letter-spacing: 0px;
}

.tiop > .frs {
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
}

.binbot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.senbvs {
  display: flex;
  align-items: center;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 13px;
  letter-spacing: 0px;
}

.senbvs > img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.right_fr {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right_fr > img {
  width: 100%;
  height: 100%;
}
</style>
